import React, { Component, PropTypes } from 'react';
import { Icon, Timeline } from 'antd';
import moment from 'moment';
import budgetJournalService from './budget-journal.service';
import 'styles/budget/budget-journal/budget-journal-history.scss';

class BudgetJournalHistory extends Component {

  state = {
    approveHistory: []
  };

  componentDidMount() {
    this.handleInit()
      .then(() => {});
  }

  handleInit = async () => {
    let { id} = this.props;
    const ret = await budgetJournalService.getJournalsHistory(id);
    const approveHistory = ret.data;
    this.setState({ approveHistory });
  };

  getHistory = (type, flag) => {
    const obj = {
      '1002': {
        icon: 'up-circle-o',
        color: '#55B1F2'
      },
      '1006': {
        icon: "check-circle-o",
        color: '#4DC690'
      },
      '1004': {
        icon: 'close-circle-o',
        color: '#FF6680'
      },
      '1003': {
        icon: 'down-circle-o',
        color: '#F2C849'
      }
    };
    return obj[type][flag];
  };

  render() {
    const { approveHistory } = this.state;
    return (
      <Timeline className="budget-journal-history">
        {
          approveHistory.map(item => {
            return (
              <Timeline.Item
                dot={<Icon type={this.getHistory(item.opearteType, 'icon')} style={{ color: this.getHistory(item.opearteType, 'color') }}/>}
              >
                <section className="budget-journal-history-content">
                  <div className="budget-journal-history-time">{moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')}</div>
                  <div className="budget-journal-history-reason">
                    <div>{item.opearteTypeName}</div>
                    <div style={{ color: this.getHistory(item.opearteType, 'color') }}>{item.reason}</div>
                  </div>
                  <div className="budget-journal-history-author">{item.opeartor} {item.opeartorCode}</div>
                </section>
              </Timeline.Item>
            );
          })
        }
      </Timeline>
    );
  }

  static propTypes = {
    id: PropTypes.string
  };
}

export default BudgetJournalHistory;
